<template>
    <div class="mapLeftView" :class="active?'':'closeView'">
        <Staview></Staview>
        <div class="StaView"  @click="closeView">
            >
        </div>
    </div>
        <draw></draw>
    <div class="mapButtonList">
        <Botton></Botton>
    </div>
    <div v-once style="height: 100%;width: 100%;" id="container">
    </div>
</template>
<script setup lang='ts'>
import { onMounted, ref, } from 'vue'
import Botton from './botton.vue'
import Staview from './Staview.vue'
import Draw from './draw.vue'
import { create } from 'node_modules/axios/index.d.cts'
import useGMapManage  from '@/store/modules/Gmap'
const useGMapManageHook = useGMapManage()
useGMapManageHook.initMap('container')
let active = ref(true)

const closeView = ()=>{
    active.value=!active.value
    console.log(active.value);
    
}


onMounted(() => {
    
})


</script>

<style   lang='scss'> 
.amap-logo,.amap-copyright{
    z-index: 10;
}

.amap-toolbar {
     top: 600px;
     height: 60px;
 }
.mapLeftView{
    transition: 0.6s;
    z-index: 100;
    position: absolute;
    padding: 5px;
    box-sizing: border-box;

    left: 0;
    height: 100%;
    width: 300px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 1px 10px rgb(152, 152, 152);
}
.mapButtonList {
    position: absolute;
    top: 280px;
    right: 0;
    z-index: 99;
    height: 200px;
    width: 50px;
 }
 .StaView {
    z-index: 100;
    position: absolute;
    height: 70px;
    width: 20px;
    border-radius:  0 15px 15px 0;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 1px 10px rgb(172, 172, 172);
    top: 45%;
    left: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &.closeView:hover{
        box-shadow: 0px 1px 5px rgb(172, 172, 172);
        
        
    }
 }
 .closeView{
    transform: translateX(-300px);
 }

</style >
